<template>
  <div class="app-container bg-white">
    <!-- 页面内容 -->
    <div class="page-body">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待完善" name="0">
           <div class="full-width" id="mul_select">
            <el-form :inline="true" size="small" :ref="search">
                <el-form-item>
                    <el-input size="small" placeholder="请输入分类名称" v-model.trim="search.title" maxlength="40" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" class="width_104" @click="getPageDataList()">查询</el-button>
                    <el-button size="small" class="width_104" @click="resetOption()">重置</el-button>
                </el-form-item>
            </el-form>
           </div>
           <el-table class="margin_top_20" :data="pageData" stripe border :header-cell-style="tableHeaderStyle" v-loading="loading">
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="title" label="分类名称"></el-table-column>
            <el-table-column prop="relationRule" label="父类">
            <!-- <template slot-scope="scope">
                <span v-if="scope.row.categoryList.length == 0">未绑定</span>
                <span v-else v-for="item in scope.row.categoryList" :key="item.id" class="selectSize">{{item.name}}</span>
            </template> -->
            </el-table-column>
            <el-table-column prop="categoryNo" label="分类编码" width="400">
            </el-table-column>
            <el-table-column prop="createTime" label="提交时间"></el-table-column>
            <el-table-column label="操作" width="260">
            <template slot-scope="scope">
                <!-- <button class="my-btn my-btn--mini my-btn--primary plain" @click="addOrEditOption(3, scope.row)" v-if="roleBtns.includes('sys:size:update') || $store.getters.isAdmin">查看</button> -->
                <button class="my-btn my-btn--mini my-btn--primary plain" @click="addOrEditOption(1, scope.row)" v-if="roleBtns.includes('sys:bindRate') || $store.getters.isAdmin">绑定税码</button>
            </template>
            </el-table-column>
           </el-table>
           <div class="text-center">
             <br />
            <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="paginationLayout" :total="pageCount"> </el-pagination>
           </div>
      </el-tab-pane>
      <el-tab-pane label="已完善" name="1">
          <div class="full-width" id="mul_select">
            <el-form :inline="true" size="small" :ref="search">
                <el-form-item>
                    <el-input size="small" placeholder="请输入分类名称" v-model.trim="search.title" maxlength="40" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" class="width_104" @click="getPageDataList()">查询</el-button>
                    <el-button size="small" class="width_104" @click="resetOption()">重置</el-button>
                </el-form-item>
            </el-form>
           </div>
           <el-table class="margin_top_20" :data="pageData" stripe border :header-cell-style="tableHeaderStyle" v-loading="loading">
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="title" label="分类名称"></el-table-column>
            <el-table-column prop="relationRule" label="父类">
            </el-table-column>
            <el-table-column prop="categoryNo" label="分类编码" width="400">
            </el-table-column>
            <el-table-column prop="createTime" label="提交时间"></el-table-column>
            <el-table-column label="操作" width="260">
            <template slot-scope="scope">
                <!-- <button class="my-btn my-btn--mini my-btn--primary plain" @click="addOrEditOption(3, scope.row)" v-if="roleBtns.includes('sys:size:update') || $store.getters.isAdmin">查看</button> -->
                <button class="my-btn my-btn--mini my-btn--primary plain" @click="addOrEditOption(2, scope.row)" v-if="roleBtns.includes('sys:editRate') || $store.getters.isAdmin">更改</button>
            </template>
            </el-table-column>
           </el-table>
           <div class="text-center">
             <br/>
            <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="paginationLayout" :total="pageCount"> </el-pagination>
           </div>
      </el-tab-pane>
    </el-tabs>
    </div>
    <class-bind-rate :visible.sync="isShowModel" :data="classData" :updateType="type" :title="title" @update="getPageDataList"></class-bind-rate>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Setting from '@/settings'
import ClassBindRate from '../components/ClassBindRate'
import { GetBindFinicalDataList } from '@/views/financial-management/services/index'
  export default {
    name: 'setting',
    components: {
      ClassBindRate
    },
    data() {
      return {
        activeName: '0',
        param:{},
        pageIndex: 1,
        pageSize: Setting.defaultTablePaginationSize,
        pageSizes: Setting.tablePaginationSizes,
        tableHeaderStyle: Setting.tableHeaderStyle,
        paginationLayout: Setting.tablePaginationLayout,
        pageData: [],
        pageCount: 0,
        loading: false,
        search: {
            title: ''
        },
        classData: {},
        isShowModel: false,
        title: '',
        type: 1
      }
    },
    
    created() {
      this.getPageDataList()
    },
    computed: {
    ...mapGetters(['roleBtns']),
  },
    methods:{
      handleClick(tab, event) {
        this.activeName = tab.name
        this.pageIndex = 1
        this.getPageDataList()
      },
      getPageDataList(){
        GetBindFinicalDataList({
          isPerfect: Number(this.activeName),
          title: this.search.title,
          pageSize: this.pageSize,
          pageNum: this.pageIndex
        }).then(res=>{
          if(res.code == 200){
             this.pageData = res.data.list;
             this.pageCount = res.data.total;
             if ((!res.data.list || !res.data.list.length) && this.pageIndex > 1) {
                this.pageIndex = 1;
                this.getPageDataList();
              }
          }
        })
      },
      addOrEditOption(type,data) {
        this.type = type
        this.classData = data
        if(type == 1) {
          this.title = '绑定税码'
        }else {
          this.title = '更改税码'
        }
        this.isShowModel = true
      },
      // onSubmit(val){
      //   console.log(val)
      //   val.creatorId = JSON.parse(this.$store.getters.userInfo).id ? JSON.parse(this.$store.getters.userInfo).id : '1'
      //   saveShareSettings(val).then(res=>{
      //     if(res.code  == 200){
      //       this.$message("保存成功")
      //       this.getPageDataList()
      //     }
      //   })
      // },
      resetOption() {
      this.search.title = ''
      this.pageIndex = 1
      this.getPageDataList()
    },
      // 分页操作
    handlePagingChange(event) {
      console.log(event)
      this.pageIndex = event
      this.getPageDataList()
    },
    handleSizeChange(event) {
      console.log(event)
      this.pageIndex = 1
      this.pageSize = event
      this.getPageDataList()
    },
    }
  }
</script>

<style scoped lang="scss">
 .container_box{
    background-color: #f2f2f7;
    height: 100vh;
    margin: 15px 25px;
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
    box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  .tabBox {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #333333;
    background-color: #FFFFFF;
    padding:0 20px;
    margin-top: 20px;

    p {
      width: 100px;
      text-align: center;
      font-size: 18px;
    }

    .active {
      font-weight: bold;
    }
  }
  }

</style>
